<template>
    <div class="content-container" direction="vertical">
        <el-container class="content-row">
            <el-button type="primary" @click="addCategory">添加分类</el-button>
        </el-container>
        <div>
        <el-table
        :data="categoryList"
        tooltip-effect="dark"
        style="width: 100%">
            <el-table-column
            label="分类ID"
            width="100"
            prop="id">
            </el-table-column>
            <el-table-column
            label="分类名称"
            width="200"
            prop="typename">
            </el-table-column>
            
            <el-table-column
            label="操作"
            width="200"
            prop="time">
                <template #default="scope">
                    <el-button size="mini" type="primary" @click="deleteCategory(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    </div>
</template>

<script>
import axios from 'axios'
import {ElMessage} from 'element-plus'

export default{
    data(){
        return{
            categoryList:[
                {
                    id:1231,
                    typename:"男装",
                },{
                    id:1131,
                    typename:"男鞋",
                },{
                    id:1031,
                    typename:"帽子",
                }
            ]
        }
    },
    mounted(){
        let baseURL='http://localhost:8888';

            axios.get(baseURL+"/type/showAllTypes")
            .then(successResponse=>{
                this.categoryList=successResponse.data;
        
            }).catch(failResponse=>{
                alert("响应异常");
            })

    },

    methods:{
        deleteCategory(typeid){
            // this.categoryList.splice(index,1)
            let targetURL='http://localhost:8888/type/deleteType?id='+parseInt(typeid);
            axios.post(targetURL)
                .then(successResponse=>{
                    if(successResponse.data==="ok"){
                        
                        ElMessage({
                            type:'success',
                            message:"删除类型成功！"
                        });
                        this.askType('http://localhost:8888/type/showAllTypes');
                    }
                    else
                        ElMessage({
                            type:'error',
                            message:"删除类型失败：该类型下有商品不允许删除！"
                        });
            
                }).catch(failResponse=>{
                    alert("响应异常");
                })

        },
        addCategory(){
            this.$prompt('请输入分类名','新增分类',{
                confirmButtonText:'确定',
                cancelButtonText:'取消',
            }).then(({value})=>{
                let typename=value;
                let targetURL='http://localhost:8888/type/addType?typename='+typename;
                axios.post(targetURL)
                .then(successResponse=>{
                    if(successResponse.data==="ok"){
                        ElMessage({
                            type:'success',
                            message:"添加新类型成功！"
                        });
                        this.askType('http://localhost:8888/type/showAllTypes');
                    }
                    else
                        ElMessage({
                            type:'error',
                            message:"添加新类型失败！"
                        });
            
                }).catch(failResponse=>{
                    alert("响应异常");
                })
            });
        },
        askType(targetURL){
            axios.get(targetURL)
            .then(successResponse=>{
                this.categoryList=successResponse.data;
        
            }).catch(failResponse=>{
                alert("响应异常");
            })
        }
    }
}

</script>





